import { useEffect, useRef, useState, useContext } from 'react'
import { useNavigate } from 'react-router-dom'
import { Input, Button } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { useDebounceFn } from 'ahooks'
import useVirtualList from '@/hooks/useVirtualList'
import { ApiContext } from '@/api/ApiHub'
import DirTree from '@/components/DirTree'
import styles from './index.module.less'

const ITEM_HEIGHT = 40
const TITLE_HEIGHT = 32

const Panel = () => {
  const navigate = useNavigate()
  const api = useContext(ApiContext)

  const listRef = useRef(null)
  const isMore = useRef(true)
  const pageNum = useRef(1)
  const keyword = useRef(null)
  const [list, setList] = useState([])

  const { pageSize, height } = useVirtualList(listRef, ITEM_HEIGHT, TITLE_HEIGHT)

  useEffect(() => {
    if (pageSize) {
      getList()
    }
  }, [pageSize])

  const getList = async (type) => {
    const { data, totalPage } = await api.getDashboards({
      dashboardName: keyword.current,
      pageNum: pageNum.current,
      pageSize: pageSize
    })
    type === 'change' ? setList(data) : setList([...list, ...data])
    isMore.current = pageNum.current < totalPage
  }

  const getDirList = async (directoryId) => {
    const { data } = await api.getDashboardsForDir(
      {
        directoryId,
        dashboardName: keyword.current
      },
      list
    )
    setList(data)
  }

  const onScroll = (e) => {
    if (!isMore.current) return
    if (e.target.scrollHeight - e.target.scrollTop === height) {
      pageNum.current += 1
      getList()
    }
  }

  const onItem = ({ isCollapse, isChildren, type, dirId }) => {
    if (type === 'dir') {
      if (isChildren) {
        const dirList = [...list].map((v) => {
          if (v.dirId === dirId) {
            return v.type === 'dir'
              ? { ...v, isCollapse: !isCollapse }
              : { ...v, isShow: !isCollapse }
          }
          return v
        })
        setList(dirList)
      } else {
        getDirList(dirId)
      }
    }
  }

  const { run: onKeywordChange } = useDebounceFn(
    (e) => {
      const value = e.target.value
      keyword.current = value
      pageNum.current = 1
      getList('change')
    },
    {
      wait: 500
    }
  )

  const onAddDashboard = () => {
    navigate('/setDashboard?id=322')
  }

  return (
    <div className={styles.panel}>
      <div className="align-mgn">
        <Input
          onChange={onKeywordChange}
          placeholder="输入搜索关键字"
          suffix={<SearchOutlined className="icon-color-base" />}
        />
      </div>
      <div ref={listRef} className={styles.content}>
        <DirTree
          height={height}
          itemHeight={ITEM_HEIGHT}
          data={list}
          onScroll={onScroll}
          onItem={onItem}
        />
      </div>
      <div className="align-mgn">
        <Button className="w-full" type="primary" onClick={onAddDashboard}>
          新建
        </Button>
      </div>
    </div>
  )
}

export default Panel
